<template>
  <div class="dpdTableColumnsSee">
    <el-dialog :visible.sync="visible" :title="'添加字段'" :close-on-click-modal="false" :close-on-press-escape="false"
      :width="'70%'">
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
          <el-form v-if="searchShow" :inline="true" :model="dataForm">
            <el-form-item>
              <el-radio-group v-model="fromFlag" @change="changeRadioEvent">
                <el-radio-button label="1">{{ '从字段库' }}</el-radio-button>
                <el-radio-button label="2">{{ '从项目库' }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <!--文本框-->
            <el-form-item>
              <el-input v-model="dataForm.likeName" placeholder="字段名称" clearable></el-input>
            </el-form-item>
            <!--文本框-->
            <!-- <el-form-item>
              <el-input v-model="dataForm.columnComment" placeholder="字段注释" clearable></el-input>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="getDataList()">{{ $t('query') }}</el-button>
              <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
            </el-form-item>
          </el-form>
        </template>
        <template v-slot:tools>
          <!-- <el-button icon="el-icon-search" @click="searchShowHandle()" circle></el-button> -->
          <!-- <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button> -->
          <!-- <el-button icon="el-icon-download" @click="$refs.xTable.openExport()" circle></el-button> -->
        </template>
      </vxe-toolbar>
      <vxe-table ref="xTable" :loading="dataListLoading" class="vxe-table-element" auto-resize @select-change="dataListSelectionChangeHandleVex"
        @select-all="dataListSelectionAllChangeHandleVex" :data="dataList" :row-class-name="rowClassName">
        <!-- <vxe-table-column type="checkbox" align="center" width="60"></vxe-table-column> -->
        <vxe-table-column field="columnName" title="字段名称"> </vxe-table-column>
        <vxe-table-column field="columnComment" title="字段注释"> </vxe-table-column>
        <vxe-table-column field="columnType" title="字段类型"> </vxe-table-column>
        <vxe-table-column field="maxLength" title="长度"> </vxe-table-column>
        <vxe-table-column field="numericScale" title="小数位数"> </vxe-table-column>
        <!-- <vxe-table-column field="dbType" title="数据库类型" align="center">
            <template slot-scope="scope">
              {{$getDictLabel('DATABASE_TYPE', scope.row.dbType)}}
            </template>
          </vxe-table-column> -->
        <vxe-table-column field="isNullable" title="可为空?" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isNullable ? 'success':'error'" size="mini" effect="dark">{{
              scope.row.isNullable ?
              '是':'否'}}</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column field="columnDefault" title="默认值">
        </vxe-table-column>
        <!-- <vxe-table-column field="updateDate" title="更新时间" width="160" align="center">
        </vxe-table-column> -->
        <vxe-table-column title="handle" width="100" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit" @click="add(scope.row)">{{ '添加' }}</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<style>
.dpdTableColumnsSee .el-dialog__body {
  padding: 0px 15px 10px 15px;
}
.dpdTableColumnsSee .add-class {
  color: #9370DB;
}
</style>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      fromFlag: '2',
      visible: false,
      loading: false,
      searchShow: true,
      mixinViewModuleOptions: {
        getDataListURL: '/dpd/dpdColumn/columnPage',
        getDataListIsPage: true,
        activatedIsNeed: false
      },
      dataForm: {
        likeName: '',
        dbType: ''
      }
    }
  },
  components: {
  },
  props: {
    backFun: {
      type: Function,
      required: true
    }
  },
  created () { },
  methods: {
    changeRadioEvent () {
      if (this.fromFlag === '1') {
        this.mixinViewModuleOptions.getDataListURL = '/dpd/dpdColumn/page'
      }
      if (this.fromFlag === '2') {
        this.mixinViewModuleOptions.getDataListURL = '/dpd/dpdColumn/columnPage'
      }
    },
    rowClassName ($event) {
      let { row } = $event
      return row.addFlag === 1 ? 'add-class' : ''
    },
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.getDataList()
      })
    },
    add (row) {
      row.addFlag = 1
      this.backFun(row)
      this.$nextTick(() => {
        this.$refs.xTable.updateData()
      })
    }
  }
}
</script>
